var firstMenuRect = [];
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var secondMenu = [];
canvas.width = 800;
canvas.height = 600;
firstMenuRect.push(
    {
        width: 200,
        height: 200 ,
        top: 0,
        left: 0,
        borderWidth: 5,
        text:"PLAY"}

    ,{
        width: 200,
        height: 200,
        top: 0,
        left: 0,
        borderWidth: 5,
        text:"instruction"}

    ,{
        width: 200,
        height: 200,
        top: 0,
        left: 0,
        borderWidth: 5,
        text:"QUIT"}

);
window.requestAnimFrame = (function (callback)
{
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback)
        {
            window.setTimeout(callback, 1000 / 60);
        };
})();
function drawRect()
{
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    secondMenu.forEach(function(element) {
        context.fillStyle = element.colour;
        context.fillRect(element.left, element.top, element.width, element.height);
    });
    //context.beginPath();
    //context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    //context.fillStyle = "#8ED6FF";
    //context.fill();
    //context.lineWidth = myRectangle.borderWidth;
    //context.strokeStyle = "black";
    //context.stroke();
}
function animate(lastTime, myRectangle, animProp)
{
    if (animProp.animate) {

        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var linearSpeed = 100;
        // pixels / second
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentY = myRectangle.height;
        if (currentY < canvas.height - myRectangle.height - myRectangle.borderWidth / 2)
        {

            //myRectangle.top -=1;
            myRectangle.height +=2;
            //myRectangle.colour = 'blue';

            secondMenu[1].height = 0;
            secondMenu[2].height = 0;
            secondMenu[3].height = 0;
            secondMenu[4].height = 0;
            secondMenu[5].height = 0;


        }
        lastTime = time;
        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);
        // draw
        drawRect();
        // request new frame
        requestAnimFrame(function ()
        {
            animate(lastTime, myRectangle, animProp);
        });
    }
}
window.onload = function ()
{
    //var myRectangle = {
    //    x: 0,
    //    y: 50,
    //    width: 100,
    //    height: 50,
    //    borderWidth: 5
    //};

    secondMenu.push(

        {colour: 'red',
            width: 800,
            height: (canvas.height/6),
            top: 0,
            left: 0,
            borderWidth: 5}

        ,{colour: 'blue',
            width: 800,
            height: (canvas.height/6),
            top: ((canvas.height/6) *1),
            left: 0,
            borderWidth: 5}

        ,{colour: 'green',
            width: 800,
            height: (canvas.height/6),
            top: ((canvas.height/6)*2),
            left: 0,
            borderWidth: 5}

        ,{colour: 'teal',
            width: 800,
            height: (canvas.height/6),
            top: ((canvas.height/6)*3),
            left: 0,
            borderWidth: 5}

        ,{colour: 'yellow',
            width: 800,
            height: (canvas.height/6),
            top: ((canvas.height/6)*4),
            left: 0,
            borderWidth: 5}

        , {colour: 'pink',
            width: 800,
            height: (canvas.height/6),
            top: ((canvas.height/6)*5),
            left: 0,
            borderWidth: 5});


    var animProp = {
        animate: false
    };
    // add click listener to canvas
    document.getElementById("canvas").addEventListener("click", function ()
    {
        if (animProp.animate)
        {
            animProp.animate = false;
        }
        else
        {
            animProp.animate = true;
            var date = new Date();
            var time = date.getTime();
            animate(time, secondMenu[0], animProp);
        }
    });
    context.clearRect(0, 0, canvas.width, canvas.height);
    // draw
    drawRect();
};

function drawFirstMenu(firstMenu)
{
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");


    //context.beginPath();
    //context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    //context.fillStyle = "#8ED6FF";
    //context.fill();
    //context.lineWidth = myRectangle.borderWidth;
    //context.strokeStyle = "black";
    //context.stroke();
}